<template>
  <div >
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="4" :sm="24">
              <a-form-item label="日期">
                <a-date-picker placeholder="请选择日期" @change="onChange"/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24" >
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="requestData" >查询</a-button>
                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card>
      <!-- -----------------------今日-------------------->
        <a-row :gutter="24" style="background-color: #f9f9f9; margin-bottom: 10px">
          <a-col :md="7" class="row-item">
            <div>
              <span class="label-head">今日门票：{{map.ticketNumToday}}票，金额：{{map.ticketMoneyToday}}</span>
              <div class="table">
                <div class="row-header">
                  <span class="table-item label">类型</span>
                  <span class="line-v"></span>
                  <span class="table-item label">数量</span>
                  <span class="line-v"></span>
                  <span class="table-item label">占比</span>
                  <span class="line-v"></span>
                </div>
                <div class="line"></div>
                <div class="row">
                  <span class="table-item label">安卓</span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.ticketAndroidNumToday || ''}}</span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.ticketAndroidPctToday || ''}}</span>
                  <span class="line-v"></span>
                </div>
                <div class="line"></div>
                <div class="row">
                  <span class="table-item label">苹果</span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.ticketIphoneNumToday || ''}}</span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.ticketIphonePctToday || ''}}</span>
                  <span class="line-v"></span>
                </div>
              </div>
            </div>
          </a-col>
          <a-col :md="7" class="row-item">
            <div>
              <span class="label-head">今日VIP：{{map.vipNumToday}}笔，金额：{{map.vipMoneyToday}}</span>
              <div class="table">
                <div class="row-header">
                  <span class="table-item label">类型</span>
                  <span class="line-v"></span>
                  <span class="table-item label">88</span>
                  <span class="line-v"></span>
                  <span class="table-item label">168</span>
                  <span class="line-v"></span>
                  <span class="table-item label">198</span>
                  <span class="line-v"></span>
                  <span class="table-item label">298</span>
                  <span class="line-v"></span>
                  <span class="table-item label">总数</span>
                  <span class="line-v"></span>
                  <span class="table-item label">占比</span>
                </div>
                <div class="line"></div>
                <div class="row">
                  <span class="table-item label">安卓</span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.vipOneAndroidToday}}</span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.vipTwoAndroidToday}}</span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.vipThreeAndroidToday}} </span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.vipFourAndroidToday}} </span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.vipAndroidToday}}</span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.vipAndroidPctToday}}</span>
                </div>
                <div class="line"></div>
                <div class="row">
                  <span class="table-item label">苹果</span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.vipOneIphoneToday}}</span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.vipTwoIphoneToday}}</span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.vipThreeIphoneToday}} </span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.vipFourIphoneToday}} </span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.vipIphoneToday}}</span>
                  <span class="line-v"></span>
                  <span class="table-item label">{{map.vipIphonePctToday}}</span>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      <!-- -----------------------本月-------------------->
      <a-row :gutter="24" style="background-color: #f9f9f9; margin-bottom: 10px">
        <a-col :md="7" class="row-item">
          <div>
            <span class="label-head">本月门票：{{map.ticketNumMonth}}票，金额：{{map.ticketMoneyMonth}}</span>
            <div class="table">
              <div class="row-header">
                <span class="table-item label">类型</span>
                <span class="line-v"></span>
                <span class="table-item label">数量</span>
                <span class="line-v"></span>
                <span class="table-item label">占比</span>
                <span class="line-v"></span>
              </div>
              <div class="line"></div>
              <div class="row">
                <span class="table-item label">安卓</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.ticketAndroidNumMonth || ''}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.ticketAndroidPctMonth || ''}}</span>
                <span class="line-v"></span>
              </div>
              <div class="line"></div>
              <div class="row">
                <span class="table-item label">苹果</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.ticketIphoneNumMonth || ''}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.ticketIphonePctMonth || ''}}</span>
                <span class="line-v"></span>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :md="7" class="row-item">
          <div>
            <span class="label-head">本月VIP：{{map.vipNumMonth}}笔，金额：{{map.vipMoneyMonth}}</span>
            <div class="table">
              <div class="row-header">
                <span class="table-item label">类型</span>
                <span class="line-v"></span>
                <span class="table-item label">88</span>
                <span class="line-v"></span>
                <span class="table-item label">168</span>
                <span class="line-v"></span>
                <span class="table-item label">198</span>
                <span class="line-v"></span>
                <span class="table-item label">298</span>
                <span class="line-v"></span>
                <span class="table-item label">总数</span>
                <span class="line-v"></span>
                <span class="table-item label">占比</span>
              </div>
              <div class="line"></div>
              <div class="row">
                <span class="table-item label">安卓</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipOneAndroidMonth}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipTwoAndroidMonth}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipThreeAndroidMonth}} </span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vip4AndroidMonth}} </span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipAndroidMonth}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipAndroidPctMonth}}</span>
              </div>
              <div class="line"></div>
              <div class="row">
                <span class="table-item label">苹果</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipOneIphoneMonth}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipTwoIphoneMonth}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipThreeIphoneMonth}} </span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vip4IphoneMonth}} </span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipIphoneMonth}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipIphonePctMonth}}</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <!-- -----------------------汇总-------------------->
      <a-row :gutter="24" style="background-color: #f9f9f9; margin-bottom: 10px">
        <a-col :md="7" class="row-item">
          <div>
            <span class="label-head">汇总</span>
            <div class="table">
              <div class="row-header">
                <span class="table-item label">类型</span>
                <span class="line-v"></span>
                <span class="table-item label">注册数</span>
                <span class="line-v"></span>
                <span class="table-item label">门票</span>
                <span class="line-v"></span>
                <span class="table-item label">VIP</span>
                <span class="line-v"></span>
                <span class="table-item label">总金额</span>
                <span class="line-v"></span>
              </div>
              <div class="line"></div>
              <div class="row">
                <span class="table-item label">今日</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.regNumToday || ''}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.ticketMoneyToday || ''}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipMoneyToday || ''}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.moneyToday || ''}}</span>
                <span class="line-v"></span>
              </div>
              <div class="line"></div>
              <div class="row">
                <span class="table-item label">本月</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.regNumMonth || ''}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.ticketMoneyMonth || ''}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipMoneyMonth || ''}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.moneyMonth || ''}}</span>
                <span class="line-v"></span>
              </div>
              <div class="line"></div>
              <div class="row">
                <span class="table-item label">全部</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.regNumAll || ''}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.ticketMoneyAll || ''}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.vipMoneyAll || ''}}</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.moneyAll || ''}}</span>
                <span class="line-v"></span>
              </div>
            </div>
          </div>
        </a-col>
        <!-- 注册-->
        <a-col :md="7" class="row-item">
          <div>
            <span class="label-head">今日注册 人数:{{map.regNumToday}}, 总注册人数:{{map.regNumAll}}</span>
            <div class="table">
              <div class="row-header">
                <span class="table-item label">类型</span>
                <span class="line-v"></span>
                <span class="table-item label">人数</span>
                <span class="line-v"></span>
              </div>
              <div class="line"></div>
              <div class="row">
                <span class="table-item label">安卓</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.regAndroidNumToday || ''}}</span>
                <span class="line-v"></span>
              </div>
              <div class="line"></div>
              <div class="row">
                <span class="table-item label">苹果</span>
                <span class="line-v"></span>
                <span class="table-item label">{{map.regIphoneNumToday || ''}}</span>
                <span class="line-v"></span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
import { appIndexDashBroadData } from '@/api/modular/app/index/appIndexManage'
export default {
  data() {
    return {
      queryParam: {},
      map: {}
    }
  },
  created() {
    this.requestData({})
  },
  methods: {
    requestData(parameter) {
      console.log(JSON.stringify(parameter))
      appIndexDashBroadData(Object.assign(parameter, this.queryParam)).then((res) => {
        this.map = res.data
        console.log(JSON.stringify(this.map))
      })
    },
    /**
     * 日期需单独转换
     */
    onChange (date, dateString) {
      this.queryParam.time = dateString
    }
  }
}
</script>
<style lang="less" scoped>
.row-item{
  background-color: #fefefe;
}
.label-head{
  font-size: 18px;
  color: #222;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
}
.label{
  font-size: 15px;
  color: #222;
  font-weight: 400;
}
.num{
  font-size: 15px;
  color: #f5222d;
  font-weight: 700;
}
.line{
  height: 1px;
  background-color: #eee;
  content: '';
}
.line-v{
  width: 1px;
  height: 40px;
  background-color: #eee;
  content: '';
}
.table{
  border: 1px solid #eee;
  border-radius: 5px;
}
.table-item{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 250px;
}
.row{
  display: flex;
  flex-direction: row;
}
.row-header{
  display: flex;
  flex-direction: row;
  background-color: #f5f5f5;
}
</style>
